<template>
  <div class="oneMap">
    <div class="form">
      num: <a-input-number v-model:value="num" :min="1" :max="100" />
      speed: <a-input-number v-model:value="speed" :max="500" />

    </div>
    <div ref="content" class="content">
      <div
        v-for="(item, index) in rodList"
        :key="index"
        ref="targets"
        :style="`
          height: ${item.height};
          width: ${item.width};
          background-color: ${item.color};
        `"
        class="rod"
        :class="{sun: item.type == 'sun'}">
        <template v-if="item.type == 'sun'">
          <div class="sun-bg">
          </div>
          <svg v-if="item.y > 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M5.662 11a4.481 4.481 0 1 1 8.746 0H17.5a.5.5 0 0 1 0 1h-15a.5.5 0 0 1 0-1h3.162zm4.473 7a.504.504 0 0 1-.22 0h.22zM5.076 4.382l-.069-.058a.5.5 0 0 0-.638.765l.858.858l.07.058a.5.5 0 0 0 .638-.765l-.859-.858zm10.663.637a.5.5 0 0 0-.765-.637l-.859.858l-.058.07a.5.5 0 0 0 .765.637l.859-.858l.058-.07zM10.52 2.435a.5.5 0 0 0-.992.09v1.213l.008.09a.5.5 0 0 0 .992-.09V2.524l-.008-.09zM8.5 16a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM5 14a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 5 14z" fill="currentColor"></path></g></svg>
          <svg v-else-if="item.y > 45" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none"><path d="M12 2a.75.75 0 0 1 .75.75v.5a.75.75 0 0 1-1.5 0v-.5A.75.75 0 0 1 12 2zM8 9a4 4 0 1 1 8 0a4 4 0 0 1-8 0zm4.75 5.75a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5zM5.75 8a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5zM17 8.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75zM6.72 5.78a.75.75 0 0 0 1.06-1.06l-.5-.5a.75.75 0 0 0-1.06 1.06l.5.5zm1.06 6.44a.75.75 0 0 0-1.06 0l-.5.5a.75.75 0 1 0 1.06 1.06l.5-.5a.75.75 0 0 0 0-1.06zm9.5-6.44a.75.75 0 1 1-1.06-1.06l.5-.5a.75.75 0 1 1 1.06 1.06l-.5.5zm-1.06 6.44a.75.75 0 0 1 1.06 0l.5.5a.75.75 0 1 1-1.06 1.06l-.5-.5a.75.75 0 0 1 0-1.06zM3.218 21.836a.75.75 0 0 1-1.054-.117c-.408-.51.119-1.055.119-1.055v-.002l.016-.011a3.49 3.49 0 0 1 .183-.137c.124-.09.303-.215.534-.364c.463-.297 1.134-.69 1.982-1.081C6.693 18.287 9.114 17.5 12 17.5s5.307.787 7.002 1.569a16.4 16.4 0 0 1 1.982 1.081a11.798 11.798 0 0 1 .717.5l.012.01l.003.003l.003.001a.75.75 0 0 1-.937 1.172l-.005-.004l-.025-.02a10.254 10.254 0 0 0-.58-.4a14.885 14.885 0 0 0-1.799-.981C16.818 19.713 14.614 19 12 19c-2.614 0-4.818.713-6.373 1.431c-.776.358-1.387.716-1.8.981a10.269 10.269 0 0 0-.579.4l-.025.02l-.005.004z" fill="currentColor"></path></g></svg>
          <svg v-else xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M6.76 4.84l-1.8-1.79l-1.41 1.41l1.79 1.79l1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41l-1.79 1.79l1.41 1.41l1.79-1.79zm-3.21 13.7l1.79 1.8l1.41-1.41l-1.8-1.79l-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41l1.79-1.8l-1.41-1.41l-1.79 1.8z" fill="currentColor"></path></svg>
        </template>
        <svg v-else xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M18.57 28C17.897 26.725 16 22.226 16 12v-.131l1.117.744A6.461 6.461 0 0 1 20 18h2a8.457 8.457 0 0 0-3.773-7.05L16.803 10h1.53a7.04 7.04 0 0 1 4.2 1.4l1.867 1.4l1.2-1.6l-1.867-1.4a9.06 9.06 0 0 0-5.4-1.8h-1.216A7.03 7.03 0 0 1 22 6h2V4h-2a9.035 9.035 0 0 0-7 3.364A9.035 9.035 0 0 0 8 4H6v2h2a7.03 7.03 0 0 1 4.883 2h-1.216a9.06 9.06 0 0 0-5.4 1.8L4.4 11.2l1.2 1.6l1.867-1.4a7.04 7.04 0 0 1 4.2-1.4h1.53l-1.423.95A8.457 8.457 0 0 0 8 18h2a6.461 6.461 0 0 1 2.883-5.387L14 11.87V12c0 8.944 1.412 13.765 2.361 16H2v2h28v-2z" fill="currentColor"></path></svg>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Coordinate } from './utils'
import { onMounted, reactive, ref, nextTick, watch } from 'vue';

const rod = {
  height: '300px',
  width: '300px',
  color: 'transparent'
  // color: '#333'
}
let timer
const coor = ref(null)
const content = ref(null)
const targets = ref(null)
const rodList = ref([])
const speed = ref(200)
const num = ref(4)

watch(() => speed.value, () => {
  if (speed.value <= 0) {
    clearInterval(timer)
    timer = null
  } else if(!timer) {
    let k = 1
    timer = setInterval(() => dxo(k++), 1)
  }
})

onMounted(() => {
  let { width, height } = getComputedStyle(content.value)
  width = Number(width.split('px')[0]) / 100
  height = Number(height.split('px')[0]) / 100
  coor.value = new Coordinate(40, 50, 100, width, height)
  let k = 1
  timer = setInterval(() => dxo(k++), 1)
})
const dxo = (k) => {
  rodList.value = []
  for (let i = 0; i < num.value; i++) {
    rodList.value.push({
      ...rod,
      x: 33 - k / (500 - speed.value),
      y: 45,
      z: 30 + i * (100 - 30) / num.value
    })
    rodList.value.push({
      ...rod,
      x: 66 - k / (500 - speed.value),
      y: 45,
      z: 30 + i * (100 - 30) / num.value
    })
  }
  rodList.value.push({
    ...rod,
    type: 'sun',
    x: 50 - k / (500 - speed.value),
    y: 55 - 5*k / (500 - speed.value),
    z: 80
  })
  nextTick(() => {
    targets.value.forEach((item, index) => {
      const { x, y, z } = rodList.value[index]
      coor.value.setPosition(item, x, y, z)
    })
    
    coor.value.getStyle()
  })
}
</script>

<style lang="scss">
.oneMap {
  height: 100%;
  position: relative;
  overflow: hidden;
  & > .form {
    position: relative;
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin-top: 60px;
    z-index: 1;
    line-height: 32px;
    gap: 10px;
  }
  & > .content {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    & > .rod {
      position: absolute;
      display: flex;
      justify-content: center;
      & > * {
        height: 100%;
      }
      &.sun {
        position: relative;
        z-index: -1;
        & > .sun-bg {
          position: absolute;
          height: 2000vh;
          width: 1000vw;
          bottom: 50%;
          background-color: salmon;
          z-index: -2;
          &::before {
            content: '';
            position: absolute;
            inset: 0;
            bottom: -50%;
            background-color:gold;
            clip-path: polygon(
              0 0, 30% 0, 50% 66.7%,
              60% 0, 90% 0, 50% 66.7%,
              100% 10%, 100% 40%, 50% 66.7%,
              100% 70%, 100% 100%, 50% 66.7%,
              70% 100%, 40% 100%, 50% 66.7%,
              10% 100%, 0 90%, 50% 66.7%,
              0 60%, 0 30%, 50% 66.7%,
            );
            transform-origin:  50% 66.7%;
            animation: rota 15s infinite linear;
          }
        }
      }
    }
    
  }
  @keyframes rota {
    to {
      transform: rotate(360deg)
    }
  }
}
</style>
